/*  */
<template>
  <div class="home">
    <!-- <Map /> -->
    <LayerPanel />
    <LandInfo v-if="landInfo"/>
    <BackButton v-if="mode!=='global'"/>
    <SalesTable v-if="mode==='building'"/>
    <FloorsTool v-if="mode!=='global'"/>
    <HouseInfo v-if="mode==='floor' && houseInfo"/>
  </div>
</template>

<script>
import LayerPanel from '../components/LayerPanel.vue'
import LandInfo from '../components/LandInfo.vue'
import BackButton from '../components/BackButton.vue'
import SalesTable from '../components/SalesTable.vue'
import FloorsTool from '../components/FloorsTool.vue'
import HouseInfo from '../components/HouseInfo.vue'
import {mapState} from 'vuex'

export default {
  name: 'Home',
  components: {
    LayerPanel,
    LandInfo,
    BackButton,
    SalesTable,
    FloorsTool,
    HouseInfo
  },
  methods: {
  },
  computed: {
    ...mapState({
      landInfo: state => state.landInfo,
      mode: state => state.mode,
      houseInfo: state => state.houseInfo
    })
  }
}
</script>

<style lang="less" scoped>
.home {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  bottom: 0;
}
.tabs {
  position: absolute;
  top: 20px;
  right: 20px;
}
</style>
